<template>
  <div class="bg-[url('@/assets/images/background.jpg')] bg-center bg-cover h-screen  overflow-hidden  relative ">
    <div class="bg-[url(@/assets/images/header.png)] bg-center bg-cover flex justify-center"
      style="height: 80px; width: 100%;">
      <div class="text-4xl mt-3 text-cyan-300 font-mono my-title" style="">果园后台管理可视化</div>
    </div>
    <div @click="toManage" class=" absolute flex cursor-pointer  top-8  left-4 items-center text-cyan-200 text-2xl">
      <div>管理平台</div>
    </div>
    <div class=" absolute flex cursor-pointer top-8  right-4 items-center text-cyan-200 text-2xl">
      <div class="mr-2">{{ time }}</div>
      <Screenfull />
    </div>
    <div class="flex text-white p-3 w-full" style="height: calc(100vh - 80px);">
      <div class="flex-1">
        <Tem />
        <Rh />
      </div>
      <div class=" w-[600px] h-full" id="map">

      </div>
      <div class="flex-1">
        <Weather />
        <Wind/>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import Screenfull from "@/components/Screenfull/index.vue"
import dayjs from "dayjs"
import { useRouter } from "vue-router"
import { Feature, Map, Overlay, View } from 'ol'
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import OSM from "ol/source/OSM.js";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { LineString, Point } from "ol/geom";
import { Style, Stroke, Icon, Text } from "ol/style";
import { DoubleClickZoom, Select } from 'ol/interaction'
import { pointerMove } from 'ol/events/condition'
import iconsrc from "@/assets/icons/svg/marker.svg"
import { listLand } from "@/api/base/land"
import Weather from '@/views/compontents/Weather.vue'
import Tem from "./compontents/Tem.vue";
import Rh from "./compontents/Rh.vue";
import Wind from "./compontents/Wind.vue"
const router = useRouter()
const time = ref()
setInterval(() => {
  time.value = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
}, 1000)
const toManage = () => {
  router.push("/user/profile")
}
const pointList = ref([[114.50, 36.26], [114.501, 36.26]])
const landList = ref([])
const map = ref()
const initMap = () => {
  const view = new View({
    center: [114.50, 36.26],
    zoom: 15,
    projection: 'EPSG:4326',
    extent: [-180, -90, 360, 90],
  })

  map.value = new Map({
    target: 'map',
    controls: [],
    layers: [new TileLayer({
      source: new XYZ({
        url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
      })
      // source:new OSM()
    })],
  })
  map.value.setView(view)
}
const drawLand = (landList, points) => {

  let lands = []
  landList.forEach((item, index) => {
    const land = new Feature(new Point(points[index]))
    let iconStyle = new Style({
      image: new Icon({
        src: iconsrc,
        color: "red",
        scale: 1,
        // anchor: [0.15, 0.9], // 图标的锚点位置，[0.5, 1] 表示图标底部中心
      }),

    })
    land.setStyle(iconStyle)
    land.setProperties({ type: 'land', land: item })
    lands.push(land)
  })

  const source = new VectorSource({ wrapX: false })
  source.addFeatures(lands)
  const layer = new VectorLayer(
    {
      source: source,
    },

  );

  map.value.addLayer(layer)

  const hover = new Select({
    condition: pointerMove,
    style: null,
    // hitTolerance: 5,
  })
  hover.on("select", (e) => {
    if (!e.deselected.length) {
      map.value.getTargetElement().style.cursor = 'pointer';
      // console.log(e.selected[0].getProperties());
      let element = document.createElement('div')
      element.style =
        'padding:8px;background:rgba(0,0,0,0.6);border-radius:6px;text-align:center;border:rgba(9, 193, 205,0.5) solid 3px;color:#eee'
      element.innerHTML = `<div>地块名称：${e.selected[0].getProperties().land.landName}</div><div>地块面积(亩)：${e.selected[0].getProperties().land.landArea}</div><div>果树数量：${e.selected[0].getProperties().land.treeNumber}</div>`
      const pop = new Overlay({
        element: element,
        position: e.selected[0].getGeometry().getCoordinates(), // [经度,纬度];
        offset: [30, -50]
      })
      map.value.addOverlay(pop)
    } else {
      map.value
        .getOverlays()
        .getArray()
        .forEach((overlay) => {
          map.value.removeOverlay(overlay)
        })
      map.value.getTargetElement().style.cursor = 'auto';
    }



  })

  map.value.addInteraction(hover)
}
const getLandList = async () => {
  const res = await listLand();
  landList.value = res.rows
}
onMounted(async () => {
  await getLandList()
  initMap()
  drawLand(landList.value, pointList.value)

})
</script>

<style scoped lang="scss">
.my-title {
  background: linear-gradient(to right,
      hsl(98 100% 62%),
      hsl(204 100% 59%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
</style>

